<template>
  <div class="mainPage">
    <!-- logo图标 -->
    <div class="logo"></div>
    <div class="main">
      <div class="left">
        <div
          class="box"
          v-for="(item, index) in list.slice(0, 3)"
          :key="item.title"
          :class="'card' + (index + 1)"
        >
          <p class="title">{{ item.title }}</p>
          <div class="content">
            <img
              :src="
                index == 0
                  ? require('@/images/group1.png')
                  : index == 1
                  ? require('@/images/group2.png')
                  : require('@/images/group3.png')
              "
              alt=""
            />
            <span
              class="btn"
              @click="clickEvt(listUrl.ljzc)"
              v-if="index == 0"
              >{{
                listUrl.ljzc.status == "待完成" ? "待上传" : listUrl.ljzc.status
              }}</span
            >
            <span
              class="btn"
              @click="clickEvt(listUrl.ljcn)"
              v-if="index == 1"
              >{{
                listUrl.ljcn.status == "待完成" ? "待上传" : listUrl.ljcn.status
              }}</span
            >
            <span
              class="btn"
              @click="clickEvt(listUrl.ljth)"
              v-if="index == 2"
              >{{
                listUrl.ljth.status == "待完成" ? "待上传" : listUrl.ljth.status
              }}</span
            >
          </div>
        </div>
        <p class="des" title="请在任命前完成">请在任命前完成</p>
      </div>
      <div class="right">
        <div
          class="box"
          v-for="(item, index) in list.slice(3, 5)"
          :key="item.title"
          :class="'card' + (index + 4)"
        >
          <p class="title">{{ item.title }}</p>
          <div class="content">
            <div v-if="index == 0" class="books">
              <p v-for="(item,index) in listUrl.ljxx.url" :key="item.url" 
              :class="
                  listUrl.ljxx.status[index] == '待完成' ? 'pending' : 'finish'
                "
              class="bookItem"
              :title="item.split('_')[0]"
              @click="study(item, index)"
              >
              
                {{item.split('_')[0]}}
              </p>
              <!-- <p
                :class="
                  listUrl.ljxx.status[0] == '待完成' ? 'pending' : 'finish'
                "
                class="bookItem"
                @click="study(1)"
                title="《中国共产党章程》"
              >
                《中国共产党章程》
              </p>
              <p
                :class="
                  listUrl.ljxx.status[1] == '待完成' ? 'pending' : 'finish'
                "
                class="bookItem"
                @click="study(2)"
                title="《中国共产党纪律处分条例》"
              >
                《中国共产党纪律处分条例》
              </p>
              <p
                :class="
                  listUrl.ljxx.status[2] == '待完成' ? 'pending' : 'finish'
                "
                class="bookItem"
                @click="study(3)"
                title="《中国共产党廉洁自律准则》"
              >
                《中国共产党廉洁自律准则》
              </p>
              <p
                :class="
                  listUrl.ljxx.status[3] == '待完成' ? 'pending' : 'finish'
                "
                class="bookItem"
                @click="study(4)"
                title="《中国共产党八项规定》"
              >
                《中国共产党八项规定》
              </p>
              <p
                :class="
                  listUrl.ljxx.status[4] == '待完成' ? 'pending' : 'finish'
                "
                class="bookItem"
                @click="study(5)"
                title="《中国共产党六个规范》"
              >
                《中国共产党六个规范》
              </p> -->
            </div>
            <p v-if="index == 0" class="bookList" @click="showDialog" title="《新任职干部廉洁学习必读书目》">
              《新任职干部廉洁学习必读书目》
            </p>
            <img
              v-if="index == 1"
              :src="require('@/images/group4.png')"
              alt=""
            />
            <span
              class="btn"
              @click="clickEvt(listUrl.ljbd)"
              v-if="index == 1"
              >{{
                listUrl.ljbd.status == "待完成" ? "去答题" : listUrl.ljbd.status
              }}</span
            >
          </div>
        </div>
        <p class="des">请在任职一个月内完成</p>
      </div>
    </div>
    <div class="footer">
      <p class="des">
        提示：廉洁谈话、廉洁从业自查申报、廉洁自律承诺书签订请在任前廉洁谈话结束后2天内完成，完成后才能正式宣布任命。党规党纪制度等内容学习、廉洁履职知识测试应在任职后一个月内线上点击链接完成，廉洁履职知识测试成绩需在90分以上。《新任职干部廉洁学习必读书目》建议在任职后一年内自行购买学习。
      </p>
      <div class="bottom_bg"></div>
    </div>
    <el-dialog
      title="新任职干部廉洁学习必读书目"
      :visible.sync="dialogTableVisible"
      width="70%"
    >
      <div class="dialogContent">
        <p class="bookItem">1.《中国共产党章程》</p>
        <p class="bookItem">2.《中国共产党廉洁自律准则》</p>
        <p class="bookItem">3.《中国共产党纪律处分条例》</p>
        <p class="bookItem">4.《国有企业管理人员处分条例》</p>
        <p class="bookItem">5.《习近平著作选读》</p>
        <p class="bookItem">6.《习近平关于严明党的纪律和规矩论述摘编》</p>
        <p class="bookItem">7.《习近平关于注重家庭家教家风建设论述摘编》</p>
        <p class="bookItem">8.《论党的自我革命》</p>
        <p class="bookItem">9.《国有企业领导人员廉洁从业若干规定》</p>
        <p class="bookItem">10.《中央八项规定精神常用规范学习手册》</p>
      </div>
    </el-dialog>
    <div class="studyDiv" v-if="isShow">
      <iframe
        style="width: 100%; height: calc(100% - 60px)"
        :src="currentSrc"
        frameborder="0"
      ></iframe>
      <el-button class="finishBtn" @click="finishStudy" type="success"
        >{{currentText}}</el-button
      >
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          title: "廉洁自查",
        },
        {
          title: "廉洁承诺",
        },
        {
          title: "廉洁谈话",
        },
        {
          title: "廉洁学习",
        },
        {
          title: "廉洁必答",
        },
      ],
      listUrl: {
        ljzc: {
          status: "待完成",
        },
        ljcn: {
          status: "待完成",
        },
        ljth: {
          status: "待完成",
        },
        ljbd: {
          status: "待完成",
        },
        ljxx: {
          status: [],
        },
      },
      dialogTableVisible: false, //弹窗展示
      studyCurrent: 0, //当前学习
      isShow: false, //学习弹窗
      currentSrc: "", //当前学习路径
      canClose: false, //是否学习弹窗可以关闭
      currentText:"" 
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    document.querySelector(".mainPage").style.height =
      window.innerHeight + "px";
  },
  methods: {
    // 获取数据
    async getData() {
      await this.axios({
        url: "/seeyon/rest/loyaltyEducation/queryAll",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
      }).then((res) => {
        this.listUrl = res.data.data;
        console.log("this.listUrl", this.listUrl);
      });
    },
    clickEvt(item) {
      if (!item.url) {
        return false;
      }
      const url = item.url;
      var windowFeatures = `width=${window.innerWidth - 20},height=${
        window.innerHeight - 10
      }`; // 设置弹窗的宽度和高度
      // 打开新窗口
      window.open(url, "newWindow", windowFeatures);
    },
    // 弹窗展示目录
    showDialog() {
      this.dialogTableVisible = true;
    },
    // 点击学习
    study(it,count) {
      this.studyCurrent = count;
      this.currentSrc = it.split('_')[1]
      this.isShow = true;
      if (this.listUrl.ljxx.status[count] != "待完成") {
        this.canClose = true;
        this.currentText = "关闭页面"
      } else {
        this.currentText = "完成学习"
        setTimeout(() => {
          this.canClose = true;
        }, 300000);
      }
    },
    finishStudy() {
      if (this.canClose == false) {
        this.$message.warning("学习时长未达五分钟");
      } else {
        this.isShow = false;
        this.currentSrc = "";
        this.canClose = false;
        this.axios({
          url:
            "/seeyon/rest/loyaltyEducation/changeStatus/" + this.studyCurrent,
          method: "get",
          headers: {
            "Content-Type": "application/json",
          },
        }).then((res) => {
          console.log("学习后请求", res);
          this.getData();
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.mainPage {
  width: 100%;
  // min-width: 1900px;
  min-height: 800px;
  background-image: url("@/images/bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  .logo {
    width: 746px;
    height: 145px;
    background-image: url("@/images/logo.png");
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
  }
  .main {
    width: 100%;
    height: 450px;
    position: absolute;
    padding: 0 100px;
    top: 50%;
    transform: translateY(-40%);
    .left {
      float: left;
      width: 55%;
      height: 100%;
      border-radius: undefineNaNpxx undefineNaNpxx undefineNaNpxx undefineNaNpxx;
      background: linear-gradient(180deg, #ffffff 0%, #ffd9a3 100%);
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: relative;
      border-radius: 8px;
      .box {
        width: 33.333%;
        height: 100%;
        // background-color: #ffecd9;
        // padding: 20px 10px;
        height: calc(100% - 10px);
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .title {
          color: #4f0101;
          text-align: left;
          font-family: "YouSheBiaoTiHei";
          font-size: 24px;
          font-style: italic;
          font-weight: 600;
          letter-spacing: 1.44px;
          width: 100%;
          text-indent: 40px;
          font-weight: 600;
          margin-top: 30px;
        }
        .content {
          margin-top: 20px;
          height: calc(100% - 120px);
          width: 75%;
          background-color: #ffffff;
          border-radius: 4px;
          box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
          text-align: center;
          position: relative;
          img {
            width: 160px;
            height: 160px;
            margin-top: 40px;
          }
          .btn {
            width: 100px;
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            background: #fda151;
            border-radius: 2px;
            line-height: 32px;
            cursor: pointer;
          }
        }
      }
      .des {
        position: absolute;
        bottom: 5px;
        font-size: 14px;
        color: #ff8b26;
        line-height: 22px;
      }
    }
    .right {
      display: inline-block;
      width: 40%;
      height: 100%;
      float: right;
      border-radius: undefineNaNpxx undefineNaNpxx undefineNaNpxx undefineNaNpxx;
      background: linear-gradient(180deg, #ffffff 0%, #ffbcbc 100%);
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: relative;
      border-radius: 8px;
      .box {
        width: 50%;
        height: 100%;
        // background-color: #ffecd9;
        // padding: 20px 10px;
        height: calc(100% - 10px);
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .title {
          color: #4f0101;
          text-align: left;
          font-family: "YouSheBiaoTiHei";
          font-size: 24px;
          font-style: italic;
          font-weight: 600;
          text-indent: 40px;
          width: 100%;
          font-weight: 600;
          margin-top: 30px;
          // margin-left: -220px;
        }
        .content {
          background-color: #ffffff;
          border-radius: 4px;
          box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
          text-align: center;
          position: relative;
          padding: 10px;
          margin-top: 20px;
          height: calc(100% - 120px);
          width: 75%;
          .books {
            width: 100%;
            .bookItem {
              padding-right: 25px;
              white-space: nowrap; /* 禁止换行 */
              overflow: hidden; /* 隐藏溢出的部分 */
              text-overflow: ellipsis; /* 使用省略号表示溢出的文字 */
              width: 100%;
              text-align: left;
              height: 48px;
              flex-shrink: 0;
              border-radius: 4px;
              line-height: 48px;
              color: #15161a;
              cursor: pointer;
              margin-bottom: 5px;
            }
          }
          .bookList {
            color: #e84b45;
            font-family: "Alibaba PuHuiTi";
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 22px;
            text-decoration: underline;
            cursor: pointer;
          }
          img {
            width: 160px;
            height: 160px;
            margin-top: 40px;
          }
          .btn {
            width: 100px;
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            background: #e84b45;
            border-radius: 2px;
            line-height: 32px;
            cursor: pointer;
          }
        }
      }
      .des {
        position: absolute;
        bottom: 5px;
        font-size: 14px;
        color: #e84b45;
        line-height: 22px;
      }
    }
  }
  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 114px;
    flex-shrink: 0;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(285deg, #ffe4e433 5.92%, #ffa6a633 94.75%);
    .des {
      height: 84px;
      color: #e84b45;
      font-family: "Alibaba PuHuiTi";
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 22px;
      letter-spacing: 0.56px;
      padding: 22px 20px 22px 60px;
      position: relative;
    }
    .des::before {
      position: absolute;
      content: "";
      width: 32px;
      height: 32px;
      background-image: url(@/images/icon.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      left: 24px;
    }
    .bottom_bg {
      height: 30px;
      flex-shrink: 0;
      background: linear-gradient(90deg, #e11815 0%, #ffa57e 100%);
    }
  }
  .studyDiv {
    position: absolute;
    width: 80%;
    height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
    .finishBtn {
      position: absolute;
      right: 20px;
      bottom: 20px;
    }
  }
}
.card1 {
  background-image: url(@/images/card1.png);
  background-size: 100% 100%;
}
.card2 {
  background-image: url(@/images/card2.png);
  background-size: 100% 100%;
}
.card3 {
  background-image: url(@/images/card3.png);
  background-size: 100% 100%;
}
.card4 {
  background-image: url(@/images/card4.png);
  background-size: 330% 100%;
  background-repeat: no-repeat;
  background-position: 0px 0px;
}
.card5 {
  background-image: url(@/images/card5.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/deep/.el-dialog {
  border-radius: 10px;
}
/deep/.el-dialog__title {
  font-size: 24px;
}
.dialogContent {
  width: 100%;
  height: 100%;
  .bookItem {
    line-height: 40px;
    font-size: 20px;
  }
}
.pending {
  background-image: url(@/images/pending.png);
  background-repeat: no-repeat;
  background-size: 107% 150%;
  background-position: 0px -14px;
}
.finish {
  background-image: url(@/images/finish.png);
  background-repeat: no-repeat;
  background-size: 107% 150%;
  background-position: 0px -14px;
}
</style>
<style>
  @media screen and (min-width: 2120px) {
  .main{
    zoom: 1.1 !important;
  }
}
@media screen and (min-width: 2390px) {
  .main{
    zoom: 1.26 !important;
  }
}
@media screen and (min-width: 2550px) {
  .main{
    zoom: 1.34 !important;
  }
}
@media screen and (min-width: 2870px) {
  .main{
    zoom: 1.5 !important;
  }
}
@media screen and (min-width: 3830px) {
  .main{
    zoom: 2 !important;
  }
}
@media screen and (max-width: 1749px) {
  .main{
    zoom: 0.9 !important;
  }
}
@media screen and (max-width: 1550px) {
  .main{
    zoom: 0.8 !important;
  }
}
@media screen and (max-width: 1445px) {
  .main {
      zoom: 0.74 !important;
  }
}
@media screen and (max-width: 1365px) {
  .main{
    zoom: 0.7 !important;
  }
}

@media screen and (max-width: 1310px) {
    .main {
        zoom: 0.67 !important;
    }
}
@media screen and (max-width: 1283px) {
  .main{
    zoom: 0.68 !important;
  }
}
@media screen and (max-width: 1168px) {
  .main{
    zoom: 0.6 !important;
  }
}
@media screen and (max-width: 1140px) {
  .main {
      zoom: 0.58 !important;
  }
}
@media screen and (max-width: 1030px) {
  .main {
      zoom: 0.5 !important;
  }
}
@media screen and (max-width: 860px) {
  .main {
      zoom: 0.44 !important;
  }
}
</style>